<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <c:set var="path" value="${pageContext.request.contextPath}"></c:set>
    <link rel="shortcut icon" href="${path}/images/titleico.ico">
    <link rel="stylesheet" href="${path}/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${path}/layui/css/formSelects-v4.css">
    <script src="${path}/layui/layui.js"></script>
    <script src="${path}/js/jquery.js"></script>
</head>
<body>
<br>
<h1 style="text-align: center">设备列表</h1>
<hr class="layui-bg-blue">
<div class="layui-form-item">
    <div class="layui-inline">
        <div class="layui-form" action="">
            <!--设备名-->
            <label class="layui-form-label">设备名称：</label>
            <div class="layui-input-inline" style="width: 175px;">
                <input value="" id="sbname" name="name" type="text" autocomplete="off" class="layui-input">
            </div>
            <!--设备类型-->
            <label class="layui-form-label">设备类型：</label>
            <div class="layui-input-inline" style="width: 280px;">
                <select id="sbtype" name="type" class="layui-select" lay-filter="sptype">
                    <option value="-1">请选择</option>
                </select>
            </div>
            <!--查询-->
            <div class="layui-input-inline" style="width: 100px;">
                <button class="layui-btn layui-btn-normal" onclick="searchData();"><i class="layui-icon layui-icon-search"></i> 查询</button>
            </div>
        </div>
    </div>
</div>
<hr class="layui-bg-blue">
<table class="layui-table" lay-data="{
            id:'sbTable',
            url:'${path}/Equip/list',
            page:true,
            toolbar:'#toolbarDemo',
            defaultToolbar: ['filter', 'print', 'exports'],
            even: true,
            loading: true
        }"
       lay-filter="sbTable">
    <thead>
    <tr>
        <th lay-data="{type:'checkbox'}"></th>
        <th lay-data="{field:'id',width:150,templet:'#idTem',align:'center',style:'background-color: #66BB6A;color: #fff;'}">设备编号</th>
        <th lay-data="{field:'name', sort: true}">设备名称</th>
        <th lay-data="{templet:'#leixing', sort: true}">设备类型</th>
        <th lay-data="{field:'num',templet:'#renshu'}">乘坐人数</th>
        <th lay-data="{field:'address'}">产地</th>
        <th lay-data="{field:'timer'}">生产日期</th>
        <th lay-data="{toolbar: '#barDemo'}">操作</th>
    </tr>
    </thead>
</table>
<script type="text/html" id="idTem">
    {{d.id< 10 ? 'EQUIP0'+d.id :  'EQUIP '+d.id}}
</script>
<script type="text/html" id="renshu">
    {{d.num< 10 ? d.num+'&nbsp;(人)':  d.num+'（人）'}}
</script>
<%--添加/修改调用的表单--%>
<div id="shebei" style="display: none">
    <br>
    <br>
    <div class="layui-form-item">
        <div class="layui-inline">
            <form action="" id="addsbforms" lay-filter="spforms" name="spforms">
                <div class="layui-form" action="">
                    <div class="layui-inline">
                        <!--设备名-->
                        <input type="hidden" id="sbbianhao" name="id">
                        <label class="layui-form-label">设备名称：</label>
                        <div class="layui-input-inline" style="width: 175px;">
                            <input value="" id="shebeiname" name="name" type="text" autocomplete="off" placeholder="请填写设备名称" class="layui-input">
                        </div>
                        <!--设备类型-->
                        <label class="layui-form-label">设备类型：</label>
                        <div class="layui-input-inline" style="width: 280px;">
                            <select name="equipTypeid" id="addsbtype" class="layui-select" lay-filter="sptype">
                                <option value="-1">请选择设备类型</option>
                            </select>
                        </div>
                    </div>
                    <div style="height: 30px;"></div>
                    <div class="layui-inline">
                        <label class="layui-form-label">乘坐人数：</label>
                        <div class="layui-input-inline" style="width: 175px;">
                            <input value="" name="num" id="shebeinum" type="text" autocomplete="off" placeholder="请填写乘坐人数" class="layui-input">
                        </div>
                        <label class="layui-form-label">产地：</label>
                        <div class="layui-input-inline" style="width: 175px;">
                            <input value="" name="address" id="shebeichandi" type="text" autocomplete="off" placeholder="请填写设备的产地" class="layui-input">
                        </div>
                    </div>
                    <div style="height: 30px;"></div>
                    <div class="layui-inline">
                        <label class="layui-form-label">生产日期：</label>
                        <div class="layui-input-inline" style="width: 175px;">
                            <input value="" id="dates" name="timer" type="text" autocomplete="off" placeholder="yyyy-MM-dd" class="layui-input">
                        </div>
                        <label class="layui-form-label">设备颜色：</label>
                        <div class="layui-input-inline" style="width: 175px;">
                            <input value="" name="color" id="shebeicolor" type="text" autocomplete="off" placeholder="请填写设备颜色" class="layui-input">
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<%--参数详情表格--%>
<div id="plan" style="display: none">
    <input type="hidden" name="" id="shebeiid">
    <table class="layui-table" lay-filter="planTable" id="planTable"></table>
</div>
<%--添加参数form--%>
<div id="addcanshu" style="display: none">
    <br>
    <br>
    <div class="layui-form-item">
        <div class="layui-inline">
            <form action="" id="addcanshuform" lay-filter="addcanshuform" name="addcanshuform">
                <div class="layui-form" action="">
                    <div class="layui-inline">
                        <!--设备名-->
                        <input type="hidden" id="canshuxiangqingid" name="id">
                        <input type="hidden" id="canshuid" name="equipId">
                        <label class="layui-form-label">参数名称：</label>
                        <div class="layui-input-inline" style="width: 175px;">
                            <input value="" id="canshuname" name="pmname" type="text" autocomplete="off" placeholder="请填写设备名称" class="layui-input">
                        </div>
                        <label class="layui-form-label">参数值：</label>
                        <div class="layui-input-inline" style="width: 175px;">
                            <input value="" id="canshuval" name="pmval" type="text" autocomplete="off" placeholder="请填写设备名称" class="layui-input">
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<script>
    //条件查询
    function searchData(){
        layui.table.reload("sbTable",{
            page:{
                curr : 1
            },
            where:{
                "name":$("#sbname").val(),
                "equipTypeid" : $("#sbtype").val()
            }
        });
    }
    //加载表格 表单
    layui.use(["form","table","laydate"], function(){
        var table = layui.table;
        var laydate = layui.laydate;
        //设备头工具栏事件
        table.on('toolbar(sbTable)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case "add":
                    layer.open({
                        type:1,
                        title :'添加商品',
                        area : '750px',
                        content: $("#shebei"),
                        skin:'layui-layer-molv',
                        btn : ['添加','取消'],
                        success:function(){
                            fomrReset();
                        },
                        yes : function (index) {
                            var name = $("#shebeiname").val();
                            var typeid = $("#addsbtype").val();
                            var num = $("#shebeinum").val();
                            var chandi = $("#shebeichandi").val();
                            var riqi = $("#dates").val();
                            if(name == null || name == ""){
                                layer.msg("<v style='color:red'>" + "设备名不能为空！" + "</v>", {time: 1200, icon: 5}),function () {
                                    return false;
                                };
                            }else if(typeid == null || typeid == -1){
                                layer.msg("<v style='color:red'>" + "没有选中设备类型！" + "</v>", {time: 1200, icon: 5}),function () {
                                    return false;
                                };
                            }else if(chandi == null || chandi == ""){
                                layer.msg("<v style='color:red'>" + "设备产地不能为空！" + "</v>", {time: 1200, icon: 5}),function () {
                                    return false;
                                };
                            }else if(num == null || num == ""){
                                layer.msg("<v style='color:red'>" + "设备人数不能为空！" + "</v>", {time: 1200, icon: 5}),function () {
                                    return false;
                                };
                            }else if(riqi == null || riqi == ""){
                                layer.msg("<v style='color:red'>" + "设备日期不能为空！" + "</v>", {time: 1200, icon: 5}),function () {
                                    return false;
                                };
                            }else{
                                var params = $("#addsbforms").serialize();
                                $.post('${path}/Equip/addsp',params,function () {
                                    layer.msg("添加成功！");
                                    layer.close(index);
                                    table.reload('sbTable');
                                });
                            }
                        }
                    });
                    break;
                //批量删除
                case 'getCheckLength':
                    var sp = table.checkStatus("sbTable");
                    var data = sp.data;
                    if (data.length == 0){
                        layer.msg("请选择要删除的数据",function () {
                            return;
                        });
                    }else{
                        layer.confirm("真的要删除这么多数据吗？",{icon:5,title: "儿童乐园友情提示！"},function (index) {
                            var params = "";
                            for (let spo of data){
                                params += "id="+spo.id+"&";
                            }
                            $.post("${path}/Equip/batchDelete",params,function () {
                                layer.close(index);
                                table.reload("sbTable");
                                layer.msg("批量删除成功")
                            })
                        });
                    }
                    break;
            };
        });
        //设备参数头工具栏事件
        table.on('toolbar(planTable)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case "bachadd":
                    layer.open({
                        type:1,
                        title :'添加参数',
                        area : '750px',
                        content: $("#addcanshu"),
                        skin:'layui-layer-molv',
                        btn : ['添加','取消'],
                        success:function(){
                            $("#canshuname").val('');
                            $("#canshuval").val('');
                            $("#canshuid").val($("#shebeiid").val());
                        },
                        yes : function (index) {
                            var name = $("#canshuname").val();
                            var canshuval = $("#canshuval").val();
                            if(name == null || name == ""){
                                layer.msg("<v style='color:red'>" + "参数名不能为空！" + "</v>", {time: 1200, icon: 5}),function () {
                                    return false;
                                };
                            }else if(canshuval == null || canshuval == ""){
                                layer.msg("<v style='color:red'>" + "参数值不能为空！" + "</v>", {time: 1200, icon: 5}),function () {
                                    return false;
                                };
                            }else{
                                var addcanshuform=$("#addcanshuform").serialize();
                                $.post('${path}/EquipPm/addcs',addcanshuform,function () {
                                    layer.msg("添加成功！");
                                    layer.close(index);
                                    table.reload('planTable');
                                });

                            }
                        }
                    });
                    break;
                //批量删除
                case 'bachdel':
                    var sp = table.checkStatus("planTable");
                    var data = sp.data;
                    if (data.length == 0){
                        layer.msg("请选择要删除的数据",function () {
                            return;
                        });
                    }else{
                        layer.confirm("真的要删除这么多数据吗？",{icon:5,title: "儿童乐园友情提示！"},function (index) {
                            var params = "";
                            for (let spo of data){
                                params += "id="+spo.id+"&";
                            }
                            $.post("${path}/EquipPm/batchDelete",params,function () {
                                layer.close(index);
                                table.reload("planTable");
                                layer.msg("批量删除成功")
                            })
                        });
                    }
                    break;
            };
        });
        //设备监听行工具时间
        table.on("tool(sbTable)",function (obj) {
            var objdata = obj.data;
            if (obj.event == 'edit'){
                //edit
                layer.open({
                    type:1,
                    title : '修改设备信息',
                    content: $("#shebei"),
                    area:'750px',
                    skin:'layui-layer-molv',
                    btn:['修改','取消'],
                    success:function(){
                        $.get('${path}/Equip/idsb',{id:objdata.id},function (data) {
                            //显示数据
                            console.log(data);
                            $("#sbbianhao").val(data.id);
                            $("#shebeiname").val(data.name);
                            $("#shebeinum").val(data.num);
                            $("#shebeichandi").val(data.address);
                            $("#dates").val(data.timer);
                            $("#addsbtype").val(data.equipType.id);
                            layui.form.render('select');
                        });
                    },
                    yes:function (index) {
                        var name = $("#shebeiname").val();
                        var typeid = $("#addsbtype").val();
                        var num = $("#shebeinum").val();
                        var chandi = $("#shebeichandi").val();
                        var riqi = $("#dates").val();
                        if(name == null || name == ""){
                            layer.msg("<v style='color:red'>" + "设备名不能为空！" + "</v>", {time: 1200, icon: 5}),function () {
                                return false;
                            };
                        }else if(typeid == null || typeid == -1){
                            layer.msg("<v style='color:red'>" + "没有选中设备类型！" + "</v>", {time: 1200, icon: 5}),function () {
                                return false;
                            };
                        }else if(chandi == null || chandi == ""){
                            layer.msg("<v style='color:red'>" + "设备产地不能为空！" + "</v>", {time: 1200, icon: 5}),function () {
                                return false;
                            };
                        }else if(num == null || num == ""){
                            layer.msg("<v style='color:red'>" + "设备人数不能为空！" + "</v>", {time: 1200, icon: 5}),function () {
                                return false;
                            };
                        }else if(riqi == null || riqi == ""){
                            layer.msg("<v style='color:red'>" + "设备日期不能为空！" + "</v>", {time: 1200, icon: 5}),function () {
                                return false;
                            };
                        }else{
                            var params = $("#addsbforms").serialize();
                            // console.log(params);
                            $.get('${path}/Equip/update',params,function (data) {
                                if(data){
                                    layer.close(index);
                                    layer.msg("修改成功!");
                                    table.reload("sbTable");
                                }else{
                                    layer.msg("由于某种原因修改失败!");
                                }
                            })
                        }
                    }
                });
            }else if(obj.event == 'del'){
                //delete
                layer.open({
                    time:0,
                    title:'儿童乐园友情提示！',
                    content:"确定要删除该行数据吗？",
                    shade: [0.3, '#000'],
                    btn:['确定','取消'],
                    yes : function () {
                        $.post("${path}/Equip/batchDelete",{"id":objdata.id},function () {
                            layer.msg('删除成功');
                            table.reload('sbTable');
                        });
                    }
                })
            }else if(obj.event == 'canshu'){
                //根据设备编号查出所有的参数信息
                layer.open({
                    type: 1,
                    title: "参数详情",
                    skin: "layui-layer-molv",
                    anim: 0,
                    offset:"100px",
                    area: "800px",
                    content: $("#plan"),
                    btn: ['关闭'],
                    success: function () {
                        $("#shebeiid").val(objdata.id);
                        //  添加表格
                        table.render({
                            elem: '#planTable'
                            ,url:'${path}/EquipPm/list?id='+objdata.id
                            ,text: {none: '该设备没有录入参数信息'}
                            ,even: true
                            ,page : true
                            ,limit : 10
                            ,toolbar: "#planTopDemo"
                            ,cols: [[
                                {type:'checkbox', title: ''}
                                ,{field:'pmname', title: '参数名称'}
                                ,{field:'pmval', title: '参数值'}
                                ,{toolbar: '#csbarDemo',title:'操作'}
                            ]]
                        });

                    }
                    ,yes:function (index) {
                        layer.close(index);
                    }
                });
            }
        })
        //设备参数监听行工具时间
        table.on("tool(planTable)",function (obj) {
            var csdata = obj.data;
            if (obj.event == 'editcs'){
                //edit
                layer.open({
                    type:1,
                    title : '修改设备参数',
                    content: $("#addcanshu"),
                    area:'750px',
                    skin:'layui-layer-molv',
                    btn:['修改','取消'],
                    success:function(){
                        $("#canshuxiangqingid").val(csdata.id)
                        $.get('${path}/EquipPm/idcs',{id:csdata.id},function (data) {
                            //显示数据
                            $("#canshuname").val(data.pmname);
                            $("#canshuval").val(data.pmval);
                        });
                    },
                    yes:function (index) {
                        var name = $("#canshuname").val();
                        var canshuval = $("#canshuval").val();
                        if(name == null || name == ""){
                            layer.msg("<v style='color:red'>" + "参数名不能为空！" + "</v>", {time: 1200, icon: 5}),function () {
                                return false;
                            };
                        }else if(canshuval == null || canshuval == ""){
                            layer.msg("<v style='color:red'>" + "参数值不能为空！" + "</v>", {time: 1200, icon: 5}),function () {
                                return false;
                            };
                        }else{
                            var paramscs = $("#addcanshuform").serialize();
                            $.get('${path}/EquipPm/update',paramscs,function (data) {
                                if(data){
                                    layer.close(index);
                                    layer.msg("修改成功!");
                                    table.reload("planTable");
                                }else{
                                    layer.msg("由于某种原因修改失败!");
                                }
                            })
                        }
                    }
                });
            }
        })
        //去Equip/idEquip中取下拉框的数据
        $.get("${path}/Equip/idEquip",function (data) {
            $.each(data,function () {
                var opt = $("<option></option>").appendTo("#sbtype");
                opt.text(this.type).val(this.id);
            });
            layui.form.render();
        });

        //去Equip/idEquip中取下拉框的数据
        $.get("${path}/Equip/idEquip",function (data) {
            $.each(data,function () {
                var opt = $("<option></option>").appendTo("#addsbtype");
                opt.text(this.type).val(this.id);
            });
            layui.form.render();
        });
        //执行一个laydate实例
        laydate.render({
            elem: '#dates' //指定元素
        });
    });
</script>
<script type="text/html" id="barDemo">
    <a href="javascript:void(0)" lay-event="edit"><i class="layui-icon layui-icon-edit" title="修改设备"></i></a>&nbsp;&nbsp;&nbsp;
    <a href="javascript:void(0)" lay-event="del"><i class="layui-icon layui-icon-close" style="font-weight: bold" title="删除此设备"></i></a>&nbsp;&nbsp;&nbsp;
    <a href="javascript:void(0)" lay-event="canshu"><i class="layui-icon layui-icon-chart" style="font-weight: bold" title="参数明细"></i></a>
</script>
<script type="text/html" id="csbarDemo">
    <a href="javascript:void(0)" lay-event="editcs"><i class="layui-icon layui-icon-edit" title="修改设备参数"></i></a>
</script>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm layui-btn layui-btn-danger" lay-event="getCheckLength"><i class="layui-icon layui-icon-delete"></i>批量删除</button>
        <button class="layui-btn layui-btn-sm layui-btn layui-btn-normal" lay-event="add"><i class="layui-icon layui-icon-add-1"></i>添加设备</button>
    </div>
</script>
<script type="text/html" id="planTopDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm layui-btn layui-btn-danger" lay-event="bachdel"><i class="layui-icon layui-icon-delete"></i>批量删除设备参数</button>
        <button class="layui-btn layui-btn-sm layui-btn layui-btn-normal" lay-event="bachadd"><i class="layui-icon layui-icon-add-1"></i>添加此设备参数</button>
    </div>
</script>
<script type="text/html" id="leixing">
    {{d.equipType.type}}
</script>
<script>
    function fomrReset(){
        document.getElementById("addsbforms").reset();
    }
</script>
</body>
</html>